<!--  -->
<template>
  <div class='About'>
    <div class="left"></div>
    <div class="right">
      <div class="top">
        <span class="back" @click="$router.push({name: 'Login'})">返回登录</span>

        <div class="content">
          <img class="about_logo" src="../assets/img/about_logo.png" alt="">
          <h1 class="slogan">科技引领未来，创新点燃希望</h1>

          <div class="text">
            <p class="title">关于我们</p>
            <p>新快乐教育平台源于北京大学教育学院学习科学实验室的长期研究和实践，实验室的专家团队对学习科学进行了深入研究，并结合游戏化学习的特色，最终形成了“新快乐教育”理念。这一理念是我们平台的灵魂，也是我们致力于推动的教育变革的方向。</p>
            <p>新快乐教育是以学习科学为基础，以游戏化学习为特色，融合现代教育技术和创新学习方式，让学习更科学、更快乐、更有效，让每一个青少年学生都能健康成长为面向未来、适应未来、德智体美劳全面发展的拔尖创新人才和合格人才的未来教育。</p>
            <p>新快乐教育平台会利用生成式人工智能，辅助教师轻松生成符合新快乐教育理念的个性化教学设计。通过这种方式，我们希望能让每一位教师都能轻松地实践新快乐教育理念，进而让每一位学生都能在科学、快乐、有效的学习环境中成长。此外，我们的平台还提供了丰富的新快乐教育相关课程资源供教师自主学习，课程内容主要包括学习科学、游戏化教学和专家讲座，通过这些课程，教师可以更好地理解新快乐教育理念，提升学习科学素养，助力教学效果的全面提高。我们的愿景是以生成式人工智能赋能教师，推动教育的革新和发展，让学习更科学、更快乐、更有效。我们希望，新快乐教育平台可以助力每一位学生发展，成为面向未来、适应未来、德智体美劳全面发展的优秀人才。</p>

          </div>

          
        </div>
      </div>
      <div class="bottom">
        <div class="text2">
          <p>我们期待与您一起，探索更科学、更快乐、</p>
          <p>更有效的学习方式，共同推动教育的进步。</p>
        </div>

        <div class="text3">
          <div class="bottom_left">
            <span>如果您有任何问题和建议，请您联系我们</span>
            <span>edugame@gse.pku.edu.cn</span>
            <span>北京市海淀区颐和园路5号</span>
          </div>
          <div class="bottom_right">
            <span>更多关于新快乐教育的理论和实践</span>
            <span>可以访问北京大学教育学院学习科学实验室的网站进行深入了解</span>
            <a href="https://pkuls.pku.edu.cn" target="_blank">https://pkuls.pku.edu.cn</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      
    }
  },

  created() {
    
  },

  mounted() {
    ;
    (function(win) {
        var tid;

        function refreshRem() {
            let designSize = 1920; // 设计图尺寸
            let html = document.documentElement;
            let wW = html.clientWidth; // 窗口宽度
            let rem = wW * 100 / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }

        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);

        refreshRem();

    })(window);
  },

  methods: {
    
  },
}
</script>

<style scoped lang="less">
.About {
  // display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  // background: url('../assets/img/about.jpg') 0 0 no-repeat;
  // background-size: cover;
}
.left {
  width: 32%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  background: url('../assets/img/about1.png') 0 0 no-repeat;
  background-size: cover;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;

  .top {
    flex: 1;
    background: url('../assets/img/about_bg.png') 0 0 no-repeat;
    background-size: cover;

    .back {
      position: absolute;
      right: .5624rem;
      top: .3374rem;
      cursor: pointer;
      padding: 0 3px;
      border-bottom: 1px solid rgba(217, 217, 217, 1);
    }

    .content {
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      padding: .5624rem 1.1248rem .225rem 2.812rem;
      text-align: center;
      .about_logo {
        width: .9561rem;
        // height: 74px;
      }
      .slogan {
        margin-top: .3374rem;
        color: rgba(154, 0, 0, 1);
      }

      .text {
        color: rgba(10, 15, 44, 0.45);
        font-size: .1575rem;
        text-align: left;
        font-weight: 400;
        margin-top: .4499rem;

        p {
          margin-bottom: .5em;
          text-indent: 2em;
        }
      }
      
      .title {
        color: rgba(10, 15, 44, 0.85);
        font-size: .18rem;
        text-indent: 0em !important;

      }

      
      
    }

  }

  .bottom {
    width: 100%;
    // height: 30%;
    background: url('../assets/img/about2.png') 0 0 no-repeat;
    background-size: cover;
    padding: .225rem 1.1248rem .225rem 2.812rem;

    .text2 {
      font-size: .18rem;
      color: rgba(10, 15, 44, 0.65);
      text-align: left;
      // margin-top: 
      p {
        margin-bottom: 0em;
      }
    }

    .text3 {
      display: flex;
      margin-top: .3374rem;
      color: rgba(77, 77, 77, 0.65);

      &>div {
        width: 50%;
        display: flex;
        flex-direction: column;
        font-size: .1462rem;
      }
    }
    
  }
}
</style>